How To Add New Sidebar In WordPress Theme With Simple Codes?
September 21st, 2016 | by Ravi Chahar || 6 Comments |
Do you want to create a WordPress theme with the dynamic sidebar widgets? Do you know how to add new sidebar in WordPress theme?
Most of the WordPress themes are sidebar widgets ready. You may have noticed that in the sidebar of the website, people show the recent posts, the social media icons, and more.
If you want to develop a theme with the sidebar then you have to add it in the theme. In this post, I will walk you through the process to register the sidebar and to call at the required place.
Add New Sidebar In WordPress Theme Using functions.php File.
If you are a WordPress developer then it won’t be a new thing for you to edit the theme files. It’s important to know about the WordPress theme files structure.
The functions.php file is the key file which handles all the functions of your WordPress theme. You have to register the sidebar in this file.
‘name’ => ‘Sidebar’,
‘id’ => ‘sidebar1’,
‘before_widget’ => ‘<div class=”widget-item”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h4 class=”widget_heading”>’,
‘after_title’ => ‘</h4>’
));
Copy and paste this code in your functions.php file. A function is created and the the WordPress function is used to register the sidebar.
As you can see the name, ID, and the HTML structure of the sidebar is added. A class is given so that you can target it later for designing your new sidebar.
A <h4> tag is used for the heading of the sidebar. You can change the function name, ID, heading name, and all the other details mentioned above.
Call The Sidebar Wherever You Want To Show It.
You have just registered the sidebar. It won’t appear until you call it in the theme file according to the location. If you want to show it in the sidebar area then edit the sidebar.php file.
Though the file name may vary according to the coding style but still the calling code would be the same. Let me show you the code.
<?php dynamic_sidebar(‘sidebar1’); ?>
<?php endif; ?>
The above code would add new sidebar in WordPress Theme. Now it’s your turn to use the CSS to design the sidebar its elements.
You can see that we are calling the sidebar using the ID. You can use your own ID but make sure that it should be the same for both the codes.
I Hope Now You Can Add New Sidebar In WordPres Theme?
For a WordPress theme, it’s very important to have the dynamic sidebar. But if you don’t want to develop a theme with the sidebar then you don’t need to put this code anywhere.
People prefer to choose the theme which has the sidebar so that they can show more posts to reduce bounce rate of their website.
Social media has a major influence on everyone’s business and it’s important to connect with people. For which users show the social media icons in the sidebar of their website.
You can add new sidebar in WordPress theme whenever you want. If you are running a theme without the sidebar then you can add in it but for that, you have to look the whole design of the theme.
Related Posts
6 comments
Leave a Reply
Hi Ravi,
Amazing piece of content along with outstanding WordPress tutorial. Indeed you have nicely explained that how to one can add new sidebar in WordPress theme with simple Codes.
Keep up the good work Ravi, and many thanks for such an informative share ?
Regards
Mairaj
Hey Mairaj,
WordPress has many things to do with. You can alter the design of your website with the use of WordPress functions. Adding a new sidebar can be helpful if you are into theme development.
If you want to show some sticky portion in the sidebar then you can create a new sidebar. It would help you.
Thanks for stopping by.
Have a great week.
~Ravi
Hey Ravi,
Good stuff here. I never thought to add a sidebar myself to a theme. I usually just looked for one that had what I wanted and stuck with that. Good to know that you can make tweaks like that. Especially since you said it sound easy enough.
~Lea
Hi Lea,
Most of the theme consist one sidebar. But if you wish to add one more then it can be done using the above-mentioned codes and the CSS. There is nothing complicated.
Thanks for stopping by.
Have a great day.
~Ravi
Hi Ravi,
Long time since I last visited…
I never thought of playing with codes to have an extra sidebar. Since it’s a drag and drop thing, I just play with the widgets.
Your tutorial makes using codes looks simple and something to try, I’ll like to experiment with someday.
Though, I’m not techy savvy like you.
Thanks for sharing.
Hey Shamsudeen,
Good to see you again.:)
You can play with the widgets. But what would you do if your theme doesn’t have any? You can use the code shown in this tutorial to add the theme support option to add the widgets in the sidebar.
If you start experimenting with the codes then it won’t be so hard to understand. You know we all learn by practicing.
Thanks for stopping by.
Have an awesome day.
~Ravi